<template>
	<view>
		<u-navbar :bgColor="bgColor" title="训练营" @leftClick="onBackClick" :titleStyle="titleStyle" leftIconColor="#E6A5B4">

		</u-navbar>
		<view class="bgV">
			<scroll-view style="height: 100%;" scroll-y="true" @scroll="onListenerScroll">
				<view class="topIv">
					<u-swiper :list="detailsData.images" :autoplay="true" indicatorStyle="right: 20px" height="450rpx"
						radius="0" circular>
					</u-swiper>
				</view>

				<view class="centerV">
					<view class="titleV">
						<view class="titleTv">{{detailsData.title}}</view>
						<view @click="onShareClick()" class="shareV">
							<image class="shareIv" src="../../static/public/share.svg"></image>
							<button v-if="detailsData" class="shareTv" open-type="share">分享有礼</button>
						</view>
					</view>

					<view class="listBGV" v-for="(data,index) in detailsData.list" :key="index">
						<view class="juliV" @click="onMapClick(data)">
							<view class="juliTv1">{{data.shop_name }} {{ data.distance}}</view>
							<view class="juliTv2">查看地图 ></view>
						</view>
						<view class="itemV" v-for="(item,pos) in data.list" :key="pos">
							<view class="leftBGV">
								<image class="itemIv" :src="item.coach_avatar"></image>
								<view class="nameTv">{{item.coach_name}}</view>
							</view>
							<view class="rightBGV">
								<view class="tightTv1">{{item.shop_name}}</view>
								<view class="tightTv2">{{item.time}}</view>
								<view class="tightVV">
									<view class="tightTv3">¥{{item.price}}</view>
									<view @click="onYueClick(item)" v-if="item.status==0" class="tightTv4">
										{{item.status_text}}
									</view>
									<view v-if="item.status!=0" class="tightTv5">{{item.status_text}}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="jieshaoV">
						<view class="jieshaoTitle">{{detailsData.title}}</view>
						<view class="jieshaoTv">{{detailsData.content}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="bottomV">

			<view class="addOrederTo" @click="onYueClick()">立即约课</view>
		</view> -->

		<ns-login ref="login" @saveUserInfo="onUserInfoClick"></ns-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				id: null,
				detailsData: null,
				scrollTop: 0,
				bgColor: "#00000000",
				userId: ''
			}
		},
		onReady() {
			let hei = uni.getSystemInfoSync().statusBarHeight;
			this.scrollTop = hei;

		},
		onLoad(op) {
			this.id = op.id;
			this.userId = op.userid;

			if (uni.getStorageSync("user_info")) {
				this.getComboDetail()
				this.getBind();
			} else {
				this.$refs.login.open({
					show: false
				});
			}
			uni.authorize({
				scope: 'scope.userLocation',
				success() {
					uni.getLocation({
						type: 'gcj02',
						geocode: true, //设置该参数为true可直接获取经纬度及城市信息
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							uni.setStorageSync("user_longitude", res.longitude);
							uni.setStorageSync("user_latitude", res.latitude);
						},
						fail(res) {
							console.log("定位失败--" + JSON.stringify(res))
						}
					});
				},
				fail() {
					uni.showModal({
						title: '未打开小程序定位',
						content: '找不到您的位置，请开启定位',
						confirmText: '开启定位',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.openSetting(); // 打开地图权限设置
							}
						}
					});
				}
			})
		},
		onShareAppMessage: function(res) {
			console.log("开始分享接收参数--->" + JSON.stringify(res))
			let shopId = this.id;
			let userId = uni.getStorageSync("user_info_id");
			return {
				title: this.detailsData.title,
				path: `pages/schedule/BootcampDetails?id=` + shopId + `&userid=` + userId, // 分享后打开的页面
				success: function(res) {
					console.log("转发成功")
				},
				fail: function(res) {
					console.log("转发失败")
				}
			}
		},
		methods: {
			onBackClick() {
				let pages = getCurrentPages();
				if (pages[pages.length - 2]) {
					//如果有上一页，就返回上一页
					wx.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/app/Home'
					});
				}

			},
			onUserInfoClick(e) {
				if (e.code == 200) {
					this.getComboDetail()
					this.getBind();
				} else {

				}
			},
			getBind() { //绑定上下级
				if (this.userId==undefined||this.userId.length == 0) {
					return;
				}
				this.$api.getBind({
					share_id: this.userId,
				}).then((res) => {

				}).catch((e) => {

				})
			},
			getComboDetail() {
				this.$api.getComboDetail({
					id: this.id,
					longitude: uni.getStorageSync("user_longitude"),
					latitude: uni.getStorageSync("user_latitude")
				}).then((res) => {
					this.detailsData = res;
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onYueClick(item) { //立即预约
				let userInfo = uni.getStorageSync("user_info");
				if (!userInfo) {
					this.$refs.login.open({
						show: false
					});
				} else {
					this.$u.route({
						url: '/pages/schedule/BootcampAdd',
						params: {
							id: item.id,
							// item: JSON.stringify(item),
							// images:JSON.stringify(this.detailsData)
						}
					})
				}
			},
			onListenerScroll: function(value) {
				if (value.detail.scrollTop > this.scrollTop) {
					this.bgColor = "#FFFFFF"
				} else {
					this.bgColor = "#00000000"
				}
			},
			onShareClick() { //分享

			},
			onMapClick(item){
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						uni.openLocation({
							longitude: parseFloat(item.longitude),
							latitude: parseFloat(item.latitude),
							name:"",//位置名
							address:"",//详细地址
							success: function (res) {
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
							},
							fail(res){
								console.log("====="+JSON.stringify(res))
							}
						});
					},
					fail() {
						uni.showModal({
							title: '未打开小程序定位',
							content: '找不到您的位置，请开启定位',
							confirmText: '开启定位',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.openSetting(); // 打开地图权限设置
								}
							}
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bgV {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.topIv {
			width: 100%;
			height: 450rpx;
			background-color: #ff0000;
		}

		.centerV {
			width: 100%;
			// height: 100%;
			flex: 1;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			box-sizing: border-box;
			margin-top: -20rpx;
			z-index: 9;
			background-color: #FFFFFF;
			margin-bottom: 120rpx;

			.titleV {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 30rpx;
				padding-right: 30rpx;
				padding-top: 50rpx;
				box-sizing: border-box;

				.titleTv {
					color: #e8e8e8;
					font-size: 36rpx;
					max-width: 450rpx;
					min-width: 450rpx;
				}

				.guanzhuIv {
					width: 32rpx;
					height: 32rpx;
				}

				.shareV {
					display: flex;
					align-items: center;

					.shareIv {
						width: 32rpx;
						height: 32rpx;
					}

					.shareTv {
						margin-left: 5rpx;
						color: #979797;
						font-size: 28rpx;
						background-color: #00000000;
					}

					button::after {
						border: none;
					}

					button {
						position: relative;
						display: block;
						margin-left: auto;
						margin-right: auto;
						padding-left: 0px;
						padding-right: 0px;
						box-sizing: border-box;
						text-align: center;
						text-decoration: none;
						line-height: 1.35;
						-webkit-tap-highlight-color: transparent;
						overflow: hidden;
						color: #000000;
						background-color: #fff;
						width: 100%;
						height: 100%;
					}
				}
			}

			.timeV {
				display: flex;
				align-items: center;
				margin-top: 60rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.timeIv {
					width: 30rpx;
					height: 30rpx;
				}

				.timeTv {
					color: #e8e8e8;
					font-size: 32rpx;
					margin-left: 23rpx;
				}
			}

			.gpsV {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				padding-left: 30rpx;
				padding-right: 10rpx;

				.gpsIv {
					width: 30rpx;
					height: 30rpx;
				}

				.gpsTv {
					flex: 1;
					color: #e8e8e8;
					font-size: 32rpx;
					margin-left: 23rpx;
				}

				.mapV {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					padding-left: 20rpx;
					padding-right: 20rpx;

					.mapIv {
						width: 32rpx;
						height: 32rpx;
					}

					.mapTv {
						margin-top: 1rpx;
						font-size: 24rpx;
						color: #8d8d8d;
					}
				}
			}

			.gpssTv {
				margin-top: 10rpx;
				margin-left: 83rpx;
				color: #8d8d8d;
				font-size: 24rpx;
			}

			.jieshaoV {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				margin-right: 30rpx;
				background: #1F1F1F;
				border-radius: 10rpx;
				margin-top: 30rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.jieshaoTitle {
					color: #fff;
					font-size: 32rpx;
				}

				.jieshaoTv {
					font-size: 28rpx;
					color: #8d8d8d;
					margin-top: 30rpx;
				}

				.subV {
					display: flex;
					align-items: center;

					.dengjiV {
						flex: 1;
						margin-top: 30rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.dengjiTv1 {
							font-size: 22rpx;
							color: #8D8D8D;
						}

						.dengjiSub {
							display: flex;
							align-items: baseline;

							.dengjiTv2 {
								font-weight: bold;
								color: #CEF743;
								font-size: 50rpx;
							}

							.dengjiTv3 {
								font-size: 24rpx;
								margin-left: 10rpx;
								color: #CEF743;
							}
						}
					}

					.shichangV {
						flex: 1;
						margin-top: 30rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.shichangTv1 {
							font-size: 22rpx;
							color: #8D8D8D;
						}

						.shichangSub {
							display: flex;
							align-items: baseline;

							.shichangTv2 {
								font-weight: bold;
								color: #CEF743;
								font-size: 50rpx;
							}

							.shichangTv3 {
								font-size: 24rpx;
								margin-left: 10rpx;
								color: #CEF743;
							}
						}

					}

					.kcalV {
						flex: 2;
						margin-top: 30rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.kcalTv1 {
							font-size: 22rpx;
							color: #8D8D8D;
						}

						.kcalSub {
							display: flex;
							align-items: baseline;

							.kcalTv2 {
								font-weight: bold;
								color: #CEF743;
								font-size: 50rpx;
							}

							.kcalTv3 {
								font-size: 24rpx;
								margin-left: 10rpx;
								color: #CEF743;
							}
						}

					}

					.subLine {
						width: 1rpx;
						height: 40rpx;
						background: #383838;
					}
				}
			}

			.listBGV {
				.juliV {
					display: flex;
					justify-content: space-between;
					padding-left: 30rpx;
					padding-right: 30rpx;
					margin-top: 30rpx;

					.juliTv1 {
						font-size: 28rpx;
						color: #8D8D8D;
					}

					.juliTv2 {
						font-size: 28rpx;
						color: #8D8D8D;
					}
				}

				.itemV {
					display: flex;
					padding: 30rpx;
					border-radius: 10rpx;
					background: #1F1F1F;
					margin-top: 10rpx;
					margin-left: 30rpx;
					margin-right: 30rpx;

					.leftBGV {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.itemIv {
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
						}

						.nameTv {
							margin-top: 10rpx;
							font-size: 32rpx;
							color: #E8E8E8;
						}
					}

					.rightBGV {
						width: 100%;
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;

						.tightTv1 {
							font-size: 28rpx;
							color: #E8E8E8;
						}

						.tightTv2 {
							font-size: 24rpx;
							color: #858585;
							margin-top: 11;
							flex: 1;
						}

						.tightVV {
							display: flex;
							align-items: center;
							align-items: center;
							justify-content: space-between;

							.tightTv3 {
								font-size: 28rpx;
								color: #858585;
							}

							.tightTv4 {
								display: flex;
								align-items: center;
								justify-content: center;
								background: #E6A5B4;
								border-radius: 10rpx;
								font-size: 28rpx;
								color: #333333;
								padding-top: 10rpx;
								padding-bottom: 10rpx;
								padding-left: 30rpx;
								padding-right: 30rpx;
							}

							.tightTv5 {
								display: flex;
								align-items: center;
								justify-content: center;
								background: #939393;
								border-radius: 10rpx;
								font-size: 28rpx;
								color: #e8e8e8;
								padding-top: 10rpx;
								padding-bottom: 10rpx;
								padding-left: 30rpx;
								padding-right: 30rpx;
							}
						}
					}
				}
			}
		}
	}

	.bottomV {
		display: flex;
		height: 98rpx;
		align-items: center;
		z-index: 10;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		background-color: #FFFFFF;

		.moneyV {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;

			.moneyTv1 {
				color: #fff;
				font-size: 28rpx;
			}

			.moneyTv2 {
				color: #E6A5B4;
				font-size: 36rpx;
				margin-left: 30rpx;
			}
		}

		.lineV {
			width: 1rpx;
			height: 40rpx;
			background: #383838;
		}

		.songV {
			display: flex;
			flex-direction: column;
			flex: 0.4;
			align-items: center;
			justify-content: center;

			.songIv {
				width: 31rpx;
				height: 31rpx;
			}

			.songTv {
				font-size: 22rpx;
				margin-top: 8rpx;
				color: #CEF743;
			}
		}

		.addOreder {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #CEF743;
			font-size: 32rpx;
			color: #333737;
		}

		.addOrederTo {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #CEF743;
			font-size: 32rpx;
			color: #333737;
			border-radius: 10rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
		}
	}
</style>
